.running{
    width: 100%;
    height: 100%;
    
    .head-list{
        margin: 21px 22px;
        .tab{
            justify-content: space-evenly;
            .active{
                position: relative;
            }
            a{
                color: black;
                font-size: 16px;
            }
        .active::after{
            display: block;
            content: '';
            height: 2px;
            width:100%;
            background-color: rgb(125, 195, 238);
            position: absolute;
            bottom: -15px;
        }
        }
    }
    .head-list::after{
        display: block;
        content: '';
        width: 100%;
        height: 2px;
        background-color: rgb(221, 221, 221);
        margin-top: 12px;
    }
    .distance{
        margin-top: 15px;
        margin-bottom: 8px;
        margin-right: 22px;
        margin-left: 22px;
    }
    .km{
        color: rgb(66, 148, 255);
        font-weight: bold;
        font-size: 48px;
        margin: 0 22px;
        span{
            color: #333333;
            font-size: 16px;
            font-weight: lighter;
            margin-left: 10px;
        }
    }
    #container {
        width:100%; 
        height:60%; 
        padding-bottom: 90px;
        position: relative;
        .mask{
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, .6);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            padding: 28px 0;
            line-height: 40px;
            justify-content: space-between;
           .mask-head{
            justify-content: space-evenly;
            div{
                height: 40px;
                background-color: rgb(156, 188, 226);
                border-radius: 20px;
                width: 100px;
                text-align: center;
                color: #fff;
            }
            .active{
                background-color: rgb(66, 148, 255);
            }

           
           }
           .go{
            width:190px;
            height: 190px;
            text-align: center;
            line-height: 190px;
            background-color: rgba(155, 197, 251,0.6);
            color: rgb(32, 150, 208);
            border-radius: 100%;
            font-size: 90px;
            font-weight: bold;
            align-self: center;
            
        }
           
            .mask-foot{
                margin-top: 10px;
                justify-content: space-around;
                .set{
                    border-radius: 100%;
                    width: 50px;
                    height: 50px;
                    background-color: #fff;
                    text-align: center;
                    line-height: 50px;
                    font-size: 25px;
                }

                .target{
                    width: 120px;
                    height: 50px;
                    line-height: 50px;
                    background-color: rgb(66, 148, 255);
                    text-align: center;
                    color: #fff;
                    border-radius: 20px;
                    font-size: 16px;
                }
            }
        }
    }

    .run-foot{
        padding: 0 15px;
        justify-content: space-between;
        align-items: center;
    
        .foot-left{
            .left-title{
                font-size: 16px;
                font-weight: bold;
                color: #000;
                line-height: 35px;
            }
            color: #9a9a9a;
        }
    }
    .nav{
        width: 100%;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        background: #fff;
        p{
            align-items: center;  
            font-size: 12px;
        .active{
            
            color: rgb(84, 150, 255);
        }
        a{
            color: rgb(145, 147, 145);
        }
            .iconfont{
                font-size: 30px;
            } 
        }
        height: 80px;
        padding: 10px 15px;
        border-top: 1px solid rgb(220, 220, 220);
  
    }
}